<template>
    <div id="AlbumInfo">
        <div class="container">
            <el-form v-if="Object.keys(form).length > 0" ref="form" :model="form" :rules="rules" label-width="120px">
                <div class="wrapper">
                    <div style="display: inline-block" class="wrapper-left">
                        <el-form-item label="专辑ID:">
                            <el-input class="w" v-model="form.externalId" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="专辑名:" prop="name">
                            <el-input :disabled="propsData.disabled" class="w" @input.native="albumSearch" v-model="form.name">
                                <span slot="suffix" class="iconfont icon-qita" @click="handleOtherLang"></span>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="全拼:">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.namePinyinFull"></el-input>
                        </el-form-item>
                        <el-form-item label="简拼:">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.namePinyinShort"></el-input>
                        </el-form-item>

                        <el-form-item label="专辑子标题:">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.subtitle"></el-input>
                        </el-form-item>

                        <el-form-item label="歌手名:">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.tblActors.name"></el-input>
                        </el-form-item>

                        <el-form-item label="icpn:">
                            <el-input disabled class="w" v-model="form.icpn"></el-input>
                        </el-form-item>

                        <el-form-item label="upc:">
                            <el-input disabled class="w" v-model="form.upc"></el-input>
                        </el-form-item>

                        <el-form-item label="语言:" prop="language">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.language"
                                placeholder="请选择语言"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="国语" value="zh"></el-option>
                                <el-option key="1" label="英语" value="en"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="风格:" prop="genre">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.genre"
                                placeholder="请选择风格"
                                class="handle-select mr10 w"
                                multiple
                            >
                                <el-option
                                    v-for="(item, index) in genres_2"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                                <!-- <el-option key="1" label="摇滚" value="1"></el-option> -->
                            </el-select>
                        </el-form-item>

                        <el-form-item label="发行日期:" prop="releaseDate">
                            <div class="block w">
                                <el-date-picker class="w" disabled v-model="form.releaseDate" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </div>
                        </el-form-item>

                        <el-form-item label="发行单位:">
                            <el-input class="w" disabled v-model="form.releaseUnit"></el-input>
                        </el-form-item>

                        <el-form-item label="发行区域:">
                            <el-select
                                :clearable="true"
                                v-model="form.releaseArea"
                                placeholder="请选择发行区域"
                                class="handle-select mr10 w"
                                disabled
                            >
                                <el-option
                                    v-for="(item, index) in releaseAreas"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                                <!-- <el-option key="1" label="ZH" value="1"></el-option> -->
                            </el-select>
                        </el-form-item>

                        <el-form-item label="制片公司:">
                            <el-input disabled class="w" v-model="form.makeCompany"></el-input>
                        </el-form-item>

                        <el-form-item label="音像公司:">
                            <el-input disabled class="w" v-model="form.audioCompany"></el-input>
                        </el-form-item>
                    </div>
                    <div style="display: inline-block" class="wrapper-right">
                        <el-form-item prop="tblAlbumPictures">
                            <!-- <el-input class="w" v-model="form.audioCompany"></el-input> -->
                            <div class="upload-file">
                                <div class="show-img" v-show="show">
                                    <img ref="img" :src="avatar" alt="" />
                                    <span class="after" @click="removeFile(0)"
                                        ><img src="@/assets/img/ico_feedback_delete@2x.png" alt=""
                                    /></span>
                                </div>
                                <!-- 文件上传按钮 -->
                                <a href="javascript:void(0)" class="btn" v-if="!show">
                                    <span class="add-btn">
                                        <img src="@/assets/img/ico_feedback_add@2x.png" alt="" />
                                    </span>
                                    <input
                                        :disabled="propsData.disabled"
                                        type="file"
                                        accept="image/*"
                                        capture="camera"
                                        id="file"
                                        name="file"
                                        @change="upload"
                                    />
                                </a>
                            </div>

                            <div class="upload-btn">
                                <div class="img-size">
                                    <p class="tips-title">上传图片至少：240*240（文件不大于5M）</p>
                                    <p class="size">
                                        <label for="240">
                                            <input type="radio" name="size" id="240" />
                                            240
                                        </label>
                                        <label for="320">
                                            <input type="radio" name="size" id="320" />
                                            320
                                        </label>
                                        <label for="600">
                                            <input type="radio" name="size" id="600" />
                                            600
                                        </label>
                                        <label for="1000">
                                            <input type="radio" name="size" id="1000" />
                                            1000
                                        </label>
                                    </p>
                                </div>
                                <a v-if="propsData.btn" href="javascript:void(0)" class="btn">
                                    上传图片
                                    <input type="file" accept="image/*" capture="camera" id="file" name="file" @change="upload" />
                                </a>
                            </div>
                        </el-form-item>

                        <el-form-item label="同步ID：">
                            <el-input class="w" disabled v-model="form.externalId"></el-input>
                        </el-form-item>

                        <el-form-item label="价格(单位：分)：">
                            <el-input disabled class="w" v-model="form.price" oninput="value=value.replace(/^\.+|[^\d.]/g,'')"></el-input>
                        </el-form-item>

                        <el-form-item label="信息来源：">
                            <el-select
                                :clearable="true"
                                v-model="form.infoSrc"
                                placeholder="请选择信息来源"
                                class="handle-select mr10 w"
                                disabled
                            >
                                <el-option key="0" label="合作商专辑" :value="0"></el-option>
                                <el-option key="2" label="自制专辑" :value="2"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="包含歌曲类型：">
                            <el-select disabled :clearable="true" v-model="form.type" placeholder="请选择状态" class="handle-select mr10 w">
                                <el-option key="0" label="没有下线歌曲" :value="0"></el-option>
                                <el-option key="1" label="存在下线歌曲" :value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="isbn:">
                            <el-input disabled class="w" v-model="form.isbn"></el-input>
                        </el-form-item>

                        <el-form-item label="状态：" prop="status">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.status"
                                placeholder="请选择状态"
                                class="handle-select mr10 w"
                            >
                                <el-option key="1" label="有效" :value="1"></el-option>
                                <el-option key="2" label="版权到期下线" :value="2"></el-option>
                                <el-option key="3" label="违规专辑下线" :value="3"></el-option>
                                <el-option key="4" label="其他原因下线" :value="4"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="描述:">
                            <!-- <el-input class="w" v-model="form.description"></el-input> -->

                            <el-input
                                :disabled="propsData.disabled"
                                type="textarea"
                                class="w"
                                placeholder="请输入内容"
                                v-model="form.description"
                                maxlength="5000"
                                show-word-limit
                                rows="5"
                                @input.native="descriSearch"
                            >
                            </el-input>
                        </el-form-item>
                    </div>
                </div>

                <el-form-item style="text-align: right; margin-right: 5%">
                    <el-button v-if="propsData.btn" type="reset" @click="handleCancel">取消</el-button>
                    <el-button
                        v-if="propsData.btn"
                        type="primary"
                        @click="handleSave"
                        :disabled="
                            legals.includes(true) ||
                            checkRequire({
                                name: form.name,
                                language: form.language,
                                genre: form.genre,
                                releaseDate: form.releaseDate.toString(),
                                status: form.status
                            })
                        "
                        >保存</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <!-- 其他国家语言弹出框 -->
        <el-dialog :close-on-click-modal="false" title="其他名称" :visible.sync="otherLangVisible" width="50%">
            <div class="limiter" v-if="form.tblAlbumLangs && form.tblAlbumLangs.length > 0">
                <div class="container-table">
                    <div class="wrap-table">
                        <div class="data-table ver1 m-b-110">
                            <div class="table-head">
                                <table>
                                    <thead>
                                        <tr class="row head">
                                            <th class="cell column1" :style="{ width: '40%' }">地区</th>
                                            <th class="cell column2" :style="{ width: 'auto' }">名称</th>
                                            <!-- <th class="cell column3">匹配类型</th> -->
                                        </tr>
                                    </thead>
                                </table>
                            </div>

                            <div class="table-body">
                                <table>
                                    <tbody>
                                        <tr v-for="(item, index) in form.tblAlbumLangs" :key="index" class="row body">
                                            <td class="cell column1" :style="{ width: '40%' }">{{ getCountryName(item.language) }}</td>
                                            <td class="cell column2" :style="{ width: 'auto' }">{{ item.importName }}</td>
                                            <!-- <td class="cell column3">{{ item.relaType }}</td> -->
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { genres_2 } from '@/components/common/index';
import { releaseAreas } from '@/components/common/index';
import { languages } from '@/components/common/';
import { mapGetters, mapMutations, mapActions } from 'vuex';
import { debounce, throttle } from '@/utils/utils.js';
import NProgress from 'nprogress';
export default {
    props: {
        propsData: {
            type: Object,
            default: function () {
                return {
                    btn: true,
                    disabled: false
                };
            }
        }
    },
    destroyed() {
        if (!this.tagsList.some((item) => item.name === 'AlbumInfo_2')) {
            localStorage.removeItem('id_album');
            localStorage.removeItem('indexFlag_album');
            this.$storage.remove('operate');
        } else {
            //  什么都不做
        }
    },
    computed: {
        ...mapGetters({
            tagsList: 'tagsList',
            form: 'albumInfoForm'
        })
    },
    data() {
        return {
            legals: [false, false, false],
            baseUrl: process.env.VUE_APP_SRC1,
            // srcs: ['http://static.xingfeng.cool/images/avatar.jpeg'],
            avatar: null,
            show: true,
            otherLangVisible: false,
            genres_2: genres_2,
            releaseAreas,
            languages,
            rules: {
                name: [{ required: true, message: '请输入专辑名', trigger: 'blur' }],
                // singerName: [{ required: true, message: '请选择歌单数量', trigger: 'blur' }],
                language: [{ required: true, message: '请选择语言', trigger: 'change' }],
                genre: [{ required: true, message: '请选择风格', trigger: 'change' }],
                releaseDate: [{ required: true, message: '请选择发布日期', trigger: 'change' }],
                tblAlbumPictures: [{ required: true, message: '请选择专辑图片', trigger: 'change' }],
                status: [{ required: true, message: '请选择状态', trigger: 'change' }]
                //

                // songsheet: [{ required: true, message: '请选择歌单数量', trigger: 'blur' }],
                // song: [{ required: true, message: '请选择歌曲数量', trigger: 'blur' }],
                // checkType: [{ required: true, message: '请选择类型', trigger: 'change' }]
            },
            // form: {
            //     id: '5658978',
            //     name: '尚未界定',
            //     namePinyinFull: 'shangweijieding',
            //     namePinyinShort: 'swjd',
            //     subtitle: '',
            //     tblActors: [],
            //     icpn: '',
            //     upc: '',
            //     language: '',
            //     genre: [],
            //     releaseDate: '',
            //     releaseUnit: '',
            //     releaseArea: '',
            //     makeCompany: '',
            //     audioCompany: '',
            //     externalId: '678987',
            //     price: '',
            //     infoSrc: '',
            //     type: '',
            //     isbn: '',
            //     status: '',
            //     description: '',
            //     tblAlbumPictures: [{ filePath: '' }]
            //     //
            // },
            query: {
                importName: '',
                albumImportName: '',
                isrc: '',
                status: '',
                pageIndex: 0,
                pageSize: 10
            },
            coverImage: null
        };
    },
    // activated() {
    //     // this.display('block');
    //     this.getDataById(this.$route.query.id);
    // },

    watch: {
        $route: {
            deep: true,
            immediate: true,
            handler(a, b) {
                if (a.name === 'AlbumInfo_2') {
                    if (Object.keys(this.form).length === 0) {
                        this.getDataById(this.$route.query.id);
                    }
                }
            }
        }
    },

    methods: {
        getCountryName(lang) {
            let languages = this.languages;
            for (let i = 0, len = languages.length; i < len; i++) {
                if (lang === languages[i].value) {
                    return languages[i].label;
                }
            }
        },
        handleOtherLang() {
            this.otherLangVisible = true;
        },
        descriSearch: debounce(function ({ target: { value } }) {
            if (!value) {
                // 不输入关键词时恢复为原来的文本
                // this.form.name = '';
                return;
            }
            setTimeout(() => {
                this.$getTextTest.call(this, value, 1);
            }, 500);
        }, 1000),
        albumSearch: debounce(function ({ target: { value } }) {
            if (!value) {
                // 不输入关键词时恢复为原来的文本
                // this.form.name = '';
                return;
            }
            setTimeout(() => {
                this.$getTextTest.call(this, value, 0);
            }, 500);
        }, 1000),
        checkRequire(obj) {
            return this.$isEmpty(obj);
        },
        ...mapActions(['setSongInfoData']),
        ...mapMutations({
            SET_SINGERINFO: 'SET_SINGERINFO',
            SET_SINGERINFO_: 'SET_SINGERINFO_',
            SET_QUKUALBUM_DATA: 'SET_QUKUALBUM_DATA',
            SET_QUKUALBUM_FORM: 'SET_QUKUALBUM_FORM'
        }),
        async getDataById(aid) {
            try {
                let url = '/album/detail';
                let { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        id: aid,
                        indexFlag: localStorage.getItem('indexFlag_album') ? localStorage.getItem('indexFlag_album') : null
                    })
                });
                console.log('专辑信息_2', res);
                // this.show = true;
                // 取值、设置默认值
                let requiredFields = {
                    id: '',
                    name: '',
                    namePinyinFull: '',
                    namePinyinShort: '',
                    subtitle: '',
                    tblActors: [],
                    icpn: '',
                    upc: '',
                    language: '',
                    genre: [],
                    releaseDate: '',
                    releaseUnit: '',
                    releaseArea: '',
                    makeCompany: '',
                    audioCompany: '',
                    externalId: '',
                    price: '',
                    infoSrc: '',
                    type: '',
                    isbn: '',
                    status: '',
                    description: '',
                    tblAlbumPictures: [{ filePath: '' }],
                    tblAlbumLangs: []
                };
                var ret = this.$chooseFields(res.data, Object.keys(requiredFields), {}, requiredFields);

                // 中间处理

                // let singerName = '';
                if (ret.tblActors.length !== 0) {
                    ret.tblActors.name = '';
                    ret.tblActors.map((item) => {
                        ret.tblActors.name += item.name + '/';
                    });
                    ret.tblActors.name = ret.tblActors.name.slice(0, -1);
                }

                if (ret.genre.length > 0) {
                    ret.genre = ret.genre.split(',');
                    ret.genre = [...new Set(ret.genre)];
                }

                if (ret.tblAlbumPictures[0].filePath !== '') {
                    this.avatar = `${this.baseUrl}/api/stream/audio?path=${ret.tblAlbumPictures[0].filePath}`;
                    this.show = true;
                } else {
                    this.avatar = null;
                    this.show = false;
                }
                // 获取专辑管理下歌曲信息
                this.getSongInfoData(ret.id);
                // 获取专辑管理下歌曲信息的歌手信息
                this.SET_SINGERINFO_(ret);
                this.$setActiveTag.call(this, ret.name);
                // 赋值
                // this.form = ret;
                this.SET_QUKUALBUM_FORM(ret);
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        ...mapMutations(['SET_TAGSLIST']),
        async getSongInfoData(albumId) {
            try {
                NProgress.start();
                let url = '/song/list';
                let { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        page: this.query.pageIndex,
                        size: this.query.pageSize,
                        albumId: albumId,
                        importName: this.query.importName.toString().trim(),
                        albumImportName: this.query.albumImportName.trim(),
                        isrc: this.query.isrc.trim(),
                        status: this.query.status
                    })
                });
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                console.log('获取专辑管理下歌曲信息', res);
                // 中间处理
                if (res.data.content && res.data.content.length > 0) {
                    res.data.content.map((item) => {
                        if (item.tblSongAuthTerritories && item.tblSongAuthTerritories.length > 0) {
                            item.tblSongAuthTerritories.priceType = '';
                            item.tblSongAuthTerritories.map((v) => {
                                if (v.priceType + '' != 'undefined') {
                                    item.tblSongAuthTerritories.priceType += v.priceType + '/';
                                }
                            });
                            item.tblSongAuthTerritories.priceType = item.tblSongAuthTerritories.priceType.slice(0, -1);
                        } else {
                            item.tblSongAuthTerritories = [];
                            item.tblSongAuthTerritories.priceType = '';
                        }
                    });
                } else {
                    res.data.content = [];
                }

                if (res.data.list && res.data.list.length > 0) {
                    for (var item of res.data.list) {
                        if (item.actors && item.actors.length && item.actors.length > 0) {
                            item.actors.name = '';
                            for (var val of item.actors) {
                                item.actors.name += val.name + '/';
                            }
                            item.actors.name = item.actors.name.slice(0, -1);
                        } else {
                            item.actors = [];
                            item.actors.name = '';
                        }
                        item.tblAlbum = item.tblAlbum ? item.tblAlbum : {};
                        item.tblCppartner = item.tblCppartner ? item.tblCppartner : {};
                    }
                } else {
                    res.data.list = [];
                }
                this.setSongInfoData(res.data);
                NProgress.done();
            } catch (err) {
                NProgress.done();
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
            // Promise.all([
            //         this.wake('/song/list', {
            //             albumId: this.form.id
            //         })
            //     ]);
        },
        handleSave() {
            this.$confirm('确定要提交吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    // this.$handleUnlock.call(this, this.save, '/album/unlock', this.form.id);
                    this.save();
                })
                .catch(() => {});
        },
        async save() {
            try {
                let url = '/album/albumcache';
                var params = this.$removeField({
                    id: this.form.id,
                    namePinyinFull: this.form.namePinyinFull,
                    namePinyinShort: this.form.namePinyinShort,
                    subtitle: this.form.subtitle,
                    icpn: this.form.icpn,
                    language: this.form.language,
                    genre: this.form.genre.join(','),
                    releaseUnit: this.form.releaseUnit,
                    makeCompany: this.form.makeCompany,
                    audioCompany: this.form.audioCompany,
                    isbn: this.form.isbn,
                    price: this.form.price,
                    infoSrc: this.form.infoSrc,
                    type: this.form.type,
                    status: this.form.status,
                    description: this.form.description,
                    coverImage: this.coverImage
                });
                var formdata = new FormData();
                for (var key in params) {
                    formdata.append(key, params[key]);
                }
                let { data: res } = await this.$http[0].post(url, formdata, {
                    headers: {
                        name: localStorage.getItem('ms_username'),
                        'Content-Type': 'multipart/form-data'
                    }
                });

                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                // this.display('none');
                this.$closeActiveTag.call(this);
                this.$router.replace({
                    path: '/album_3/admin'
                });
                this.SET_QUKUALBUM_DATA([]);
            } catch (err) {
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        // async handleUnlock(callback) {
        //     try {
        //         let url = '/album/unlock';
        //         let { data: res } = await this.$http[0].get(url, {
        //             params: {
        //                 id: this.form.id
        //             }
        //         });
        //         if (res.code != '0000') {
        //             throw new Error(res.message);
        //         }
        //         callback && callback();
        //     } catch (err) {
        //         console.dir(err);
        //         this.$message.error({
        //             message: err.message,
        //             duration: 1500
        //         });
        //     }
        // },
        cancel() {
            this.$closeActiveTag.call(this);
            this.$router.replace({
                path: '/album_3/admin'
            });
        },
        handleCancel() {
            this.$handleUnlock.call(this, this.cancel, '/album/unlock', this.form.id);
            // this.display('none');
        },
        removeFile(index) {
            // if (this.form.tblAlbumPictures[0]) {
            //     this.form.tblAlbumPictures[0].filePath = '';
            // } else {
            //     this.form.tblAlbumPictures = [];
            // }

            this.avatar = null;
            this.show = false;
        },
        upload(e) {
            console.log(this.$refs);
            var event = e || window.event;
            var target = event.target || e.srcElement;
            var file = target.files[0];
            let isLt1M = file.size / 1024 / 1024 <= 1;
            if (!isLt1M) {
                return this.$message.error('上传图片大小不能超过1MB!');
            }
            this.show = true;
            this.$getImgTest_plus.call(this, e, target, file, 2, () => {}, 'avatar');
            // this.uploadFile(e);
        }
        // async uploadFile(e, target, file) {
        //     try {
        //         let isLt5M = file.size / 1024 / 1024 <= 5;
        //         if (!isLt5M) {
        //             return this.$message.error('上传图片大小不能超过5MB!');
        //         }

        //         var formdata = new FormData();
        //         formdata.append('coverImage', file);
        //         formdata.append('id', this.$route.query.id);
        //         let url = '/album/uploadImg';

        //         let { data: res } = await this.$http[0].post(url, formdata, {
        //             headers: {
        //                 'Content-Type': 'multipart/form-data',
        //                 name: localStorage.getItem('ms_username')
        //             }
        //         });
        //         console.log('响应数据', res);
        //         target.value = null;
        //         this.$message.success({
        //             message: res.message,
        //             duration: 1500
        //         });

        //         this.getDataById(this.$route.query.id);
        //     } catch (err) {
        //         console.dir(err);
        //         target.value = null;
        //         this.$message.error({
        //             message: err.message,
        //             duration: 1500
        //         });
        //     }
        // }
    }
};
</script>
<style lang="scss">
#AlbumInfo {
    .icon-qita {
        font-size: 18px;
        cursor: pointer;
    }
    .limiter * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    /*==================================================================
[ 表格宽度 ]*/
    .limiter {
        ::-webkit-scrollbar {
            display: none;
        }

        // 　　width: 80%;
        margin: 10px auto 0;
        /*---------------------------------------------*/

        .container-table {
            width: 100%;
            background: #fff;
            // padding: 0px 30px;
        }

        .wrap-table {
            width: 100%;
        }

        .data-table {
            background-color: #fff;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th {
            text-align: center;
            font-weight: bold;
            border: 1px solid gray;
        }

        td {
            font-weight: unset;
            text-align: center;
            border: 1px solid gray;
        }

        /*==================================================================
[ 单元格宽度 ]*/
        .column1 {
            width: 20%;
        }

        .column2 {
            // width: 60%;
            width: auto;
        }

        .column3 {
            width: 40%;
        }

        // .column4 {
        //     width: 19%;
        // }

        // .column5 {
        //     width: 13%;
        // }
        /*---------------------------------------------*/

        .table-head th {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .table-body td {
            height: 46px;
        }

        /*==================================================================
[ Fix header ]*/
        .data-table {
            position: relative;
            padding-top: 46px;
        }

        .table-head {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
        }

        .table-body {
            max-height: 231px;
            overflow: auto;
            width: 100%;
        }

        /*==================================================================
[ Ver1 ]*/

        .data-table.ver1 th {
            font-family: Lato-Bold;
            font-size: 18px;
            color: #333;
            background-color: #e5e5e5;
        }

        .data-table.ver1 td {
            font-family: Lato-Regular;
            font-size: 14px;
            color: #808080;
        }
    }
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        /* width: 120px; */
        width: 185px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .w {
        // width: 470px !important;
        width: 100% !important;
    }

    .upload-file {
        background: transparent;
        position: relative;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 260px;
        align-items: center;
        align-content: flex-start;
        justify-items: center;
        grid-auto-flow: row;
        margin-bottom: 10px;
        .show-img {
            width: 240px;
            height: 240px;
            position: relative;
            border-radius: 15px;
            img {
                width: 100%;
                height: 100%;
                border-radius: 15px;
                box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);
            }
            .after {
                position: absolute;
                right: -0.26rem;
                top: -0.26rem;
                font-size: 1.04rem;
                width: 1.04rem;
                height: 1.04rem;
                line-height: 1.04rem;
                text-align: center;
            }
        }
        .btn {
            border: 1px dashed #666;
            position: relative;
            left: 0;
            display: inline-block;
            text-align: center;
            color: #fff;
            text-decoration: none;
            width: 250px;
            height: 250px;
            border-radius: 15px;
            .add-btn {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                width: 30px;
                height: 30px;
                border-radius: 15px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            #file {
                opacity: 0;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                border-radius: 15px;
            }
        }
    }

    .upload-btn {
        // text-align: right;
        display: flex;
        flex-direction: row;
        justify-content: center;
        // padding-left: 110px;
        // margin-right: 120px;
        align-items: center;
        .img-size {
            // margin-right: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: left;

            .tips-title {
                font-size: 14px;
                height: 16px;
                line-height: 16px;
                margin-bottom: 10px;
            }
            .size {
                height: 16px;
                line-height: 16px;
                margin-left: 2px;
                label {
                    cursor: pointer;
                    margin-right: 10px;
                    input {
                        cursor: pointer;
                    }
                }
            }
        }
        .btn {
            position: relative;
            display: inline-block;
            text-align: center;
            color: #fff;
            text-decoration: none;
            width: 80px;
            height: 32px;
            line-height: 32px;
            background: #409eff;
            border-radius: 3px;
            font-size: 12px;
            vertical-align: middle;
            margin-left: 10px;
        }
        input[name='file'] {
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
        }
    }

    .wrapper {
        display: grid;
        grid-template-columns: 45% 55%;
        justify-content: flex-start;
        justify-items: left;
        grid-auto-flow: row;
        align-items: flex-start;
        align-content: flex-start;
        padding-top: 10px;
        box-sizing: border-box;
        .wrapper-left {
            width: 90%;
        }
        .wrapper-right {
            width: 90%;
            transform: translate3d(0px, -5px, 0px);
            .el-form-item {
                &:first-of-type {
                    .el-form-item__content {
                        // display: flex;
                        // flex-direction: row;
                        // align-items: center;
                    }
                }
            }
        }
    }
}
</style>
